<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器的使用</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <p>{{value}}</p>
        <button @click="value++">button</button>

        <p>{{price}}</p>
        <button @click="priceChange()">button</button>
        <p>比原价贵了{{expensive}}</p>

        <p>{{obj}}</p>
    </div>
    
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                value: 100,
                price: 100,
                expensive:0,
                rePrice: 100,
                obj: {
                    value: 100
                }
            },
            methods:{
                priceChange(){
                    this.price += 10
                },
                objValueChang(){
                    this.obj.value++
                }
            },
            watch:{//监听器
                   //key值必须和dataname相同
                   //监听data绑定的value值,那么键值也必须叫value
                   //键值对中值的值必须是匿名函数
                value(newValue,oldValue){
                    console.log("value值发生了变化");
                    console.log("old",oldValue);
                    console.log("new",newValue);
                },

                price(newValue,oldValue){
                    this.expensive = newValue - this.rePrice
                },

                obj(){
                    console.log("obj的值发生了变化");
                }
            }
        })
    </script>
</body>

</html>